<template>
	<view class="box">
		<view class="bg"></view>
		<view class="content">
			<view class="card">
				<view class="c999 f22">可提现金额(元）</view>
				<view class="num">{{money}}</view>
				<view class="btn fw-bt">
					<view @click="commissionDetail">奖金明细</view>
					<view @click="applyTixian">申请提现</view>
				</view>
			</view>
			<view class="card2 fw-bt" v-for="(item,index) of list" :key="index" @click="goOther(index)">
				<view class="f-w">
					<view class="img f-w">
						<image :src="item.img1" mode=""></image>
					</view>
					<view class="name f28">{{item.name}}</view>
				</view>
				<view class="img2 f-w">
					<image :src="item.img2" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:0,
				list: [{
						name: '分享二维码',
						img1: 'https://jw.xzsw2021.com/static/user/icon_260@2x.png',
						img2: 'https://jw.xzsw2021.com/static/user/icon_162@2x.png'
					},
					{
						name: '我的分享',
						img1: 'https://jw.xzsw2021.com/static/user/icon_261@2x.png',
						img2: 'https://jw.xzsw2021.com/static/user/icon_162@2x.png'
					},
					{
						name: '奖励订单',
						img1: 'https://jw.xzsw2021.com/static/user/icon_262@2x.png',
						img2: 'https://jw.xzsw2021.com/static/user/icon_162@2x.png'
					},
					{
						name: '美食官规则',
						img1: 'https://jw.xzsw2021.com/static/user/icon_264@2x.png',
						img2: 'https://jw.xzsw2021.com/static/user/icon_162@2x.png'
					}
					// ,
					// {
					// 	name: '申请成为美食分享官',
					// 	img1: 'https://jw.xzsw2021.com/static/user/icon_263@2x.png',
					// 	img2: 'https://jw.xzsw2021.com/static/user/icon_162@2x.png'
					// }
				]
			}
		},
		onShow() {
			this.check()
		},
		methods: {
			check(){
				this.$request('user/spread_info',{},'GET').then(res=>{
					this.money=res.data.total_brokerage_price
					
				})
				
			},	
			
			
			// 佣金明细
			commissionDetail(){
				console.log('佣金明细');
				uni.navigateTo({
					url:'/pages/user/balance/balance-detail?type=2'
				})
			},
			// 申请提现
			applyTixian(){
				uni.navigateTo({
					url:'/pages/user/distribution/apply-tixian/apply-tixian'
				})
				console.log('申请提现');
			},
			goOther(index){
				if(index===0){//分享二维码
					console.log('分享二维码');
					uni.navigateTo({
						url:'/pages/user/distribution/code'
					})
				}else if(index===1){//我的分享
					console.log('我的分享');
					uni.navigateTo({
						url:'/pages/user/distribution/myshare'
					})
				}else if(index===2){//分销商订单
					console.log('奖励订单');
					uni.navigateTo({
						url:'/pages/user/distribution/distr-order'
					})
				}else if(index===3){//分销商规则
					console.log('美食官规则');
					uni.navigateTo({
						url:'/pages/xieyi/xieyi?type=11'
					})
				}else if(index===4){//申请成为美食官
					console.log('申请成为美食官');
					uni.navigateTo({
						url:'/pages/user/distribution/apply?type=1'
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 375rpx;
			background: linear-gradient(180deg, #109C7A 0%, rgba(16, 156, 122, 0) 100%);
		}

		.content {
			padding: 45rpx 30rpx 0;
			position: relative;

			&>view {
				background: #FFFFFF;
				border-radius: 20rpx;
			}

			.card {
				padding: 38rpx 72rpx;
				margin-bottom: 30rpx;

				.num {
					margin: 30rpx 0 60rpx;
					font-size: 60rpx;
				}

				.btn {
					&>view {
						width: 240rpx;
						height: 66rpx;
						line-height: 66rpx;
						font-size: 24rpx;
						text-align: center;
						background: #FFFFFF;
						color: #999;
						box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(208, 209, 211, 0.4);
						border-radius: 10rpx;
					}

					&>view:nth-child(2) {
						color: #fff;
						background: linear-gradient(64deg, #2BCCA5, #22B591);
						box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
					}
				}
			}

			.card2 {
				margin: 20rpx auto;
				padding: 50rpx 28rpx;
				.img {
					margin-right: 12rpx;
					width: 40rpx;
					height: 36rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.img2 {
					width: 16rpx;
					height: 28rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
